<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>综合练习</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .hot-news{
        width: 500px;
        margin: 50px auto;
      }
      hr{
        margin: 10px 0;
      }
      li{
        display:flex;
        align-items: center;
        margin-bottom: 20px;
      }
      .order {
        font-size: 20px;
        margin-right: 10px;
      }
      /* ul > li:nth-child(1) > .order{
        color:rgb(170, 34, 34);
      }
      ul > li:nth-child(2) > .order{
        color:rgb(182, 51, 51);
      }
      ul > li:nth-child(3) > .order{
        color:rgb(199, 142, 37);
      } */
      .title{
        margin-right: 10px;
      }
      .hot{
        background: rgb(211, 34, 34);
        font-size: 10px;
        color: white;
        padding: 2px 3px;
        border-radius: 5px;
      }
      .index-1{
        color: rgb(190, 7, 7);
      }
      .index-2{
        color:rgb(211, 34, 34)
      }
      .index-3{
        color:rgb(197, 88, 16)
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
      // https://www.toutiao.com/
      let data = [
        {
          id: 1,
          title: "河北通勤车坠河瞬间曝光",
          time: "2022-06-27",
          is_hot: true, //是否为热门
          is_new: false, //是否最新的新闻
        },
        {
          id: 2,
          title: "国足公布对阵沙特23人大名单",
          time: "2023-06-22",
          is_hot: true,
          is_new: false,
        },
        {
          id: 3,
          title: "“争控”成中印边境谈判关键词",
          time: "2023-05-22",
          is_hot: true,
          is_new: false,
        },
        {
          id: 4,
          title: "五粮液独董郎定常因突发疾病去世",
          time: "2024-04-22",
          is_hot: false,
          is_new: false,
        },
        {
          id: 5,
          title: "王立科被逮捕：曾想停播人民的名义",
          time: "2025-03-22",
          is_hot: false,
          is_new: true,
        },
        {
          id: 6,
          title: "台风“圆规”路径",
          is_hot: true,
          is_new: false,
          time: "2022-07-22",
        },
        {
          id: 7,
          title: "保姆报复前雇主偷走其最爱煎锅",
          is_hot: true,
          is_new: false,
          time: "2022-08-22",
        },
        {
          id: 8,
          title: "中国南海军事演习引发海外关注",
          is_hot: false,
          is_new: false,
          time: "2022-09-06",
        },
        {
          id: 9,
          title: "河北坠河班车已致14人遇难",
          is_hot: true,
          is_new: false,
          time: "2022-10-25",
        },
      ];
        
      //创建虚拟 DOM 
      let vdom = <div className="hot-news">
          <h2>头条热榜</h2>
          <hr />
          <ul>
            {
              data.map(item => {
                return <li>
                      <span className={"order index-"+item.id}>{item.id}</span>  
                      <span className="title" onClick={() => {
                        alert(item.time)
                      }}>{item.title}</span>
                      {item.is_hot && <span className="hot">热</span>}
                    </li>
              })
            }
          </ul>
        </div>
      
      //渲染
      ReactDOM.render(vdom, document.querySelector('#root'))
    </script>
  </body>
</html>
